<template>
  <div class="hello">
    <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-row  type="flex" justify="space-between">
        <a-col :span="12">
          <a-form-model-item label="省市区(县)">
            <a-cascader v-model="form.region" :options="regionOptions" placeholder="选择省市区(县)" @change="regionChange">
            </a-cascader>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="基层单位">
            <a-select defaultValue="0" v-model="form.basic" placeholder="选择是否为基层单位">
              <a-select-option value="11"> 是 </a-select-option>
              <a-select-option value="00"> 否 </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row  type="flex" justify="space-between">
        <a-col :span="12">
          <a-form-model-item label="行业">
            <a-select defaultValue="40" v-model="form.industry" placeholder="选择行业" :options="industryOptions">
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="类型编码">
            <a-select defaultValue="118" v-model="form.type" placeholder="选择类型编码" :options="typeSelection">
            </a-select>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row type="flex" justify="space-between">
        <a-col :span="12">
          <a-form-model-item label="网络标识">
            <a-select v-model="form.networkId" placeholder="选择网络标识" :options="networkOptions">
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="农场">
            <a-select v-model="form.farmId" placeholder="选择农场" :options="farmOptions">
            </a-select>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row type="flex" justify="end">
        <a-col :span="8" :offset="16">
          <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
            <a-button type="primary" @click="onSubmit"> 生成国标ID </a-button>
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
    <a-modal title="国标ID" :visible="visible" :confirm-loading="confirmLoading" @ok="handleOk" @cancel="handleCancel">
      <p>{{ gbId }}</p>
    </a-modal>
  </div>
</template>

<script>
export default {
  name: "CreateGbId",
  data() {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      form: {
        region: undefined,
        basic: "00",
        industry: "40",
        type: "118",
        networkId: "7",
        farmId: "",
      },
      gbId: "",
      visible: false,
      confirmLoading: false,
      regionOptions: [],
      typeSelection: [],
      networkOptions: [],
      industryOptions: [],
      farmOptions: [],
    };
  },
  async created() {
    this.typeSelection = this.$store.getters.typeSelection
    this.networkOptions = this.$store.getters.networkOptions
    this.industryOptions = this.$store.getters.industryOptions
    this.convertRegion(this.$store.getters.govRegionList, this.$store.getters.govRegionMap);
  },
  methods: {
    convertRegion(list, objMap) {
      const treeData = [];

      list.forEach((element) => {
        let item = {
          id: element.id,
          value: element.code,
          label: element.name,
          parentId: element.parentId,
        };
        if (!objMap[item.parentId]) {
          treeData.push(objMap[item.id]);
        } else {
          objMap[item.parentId].children
            ? objMap[item.parentId].children.push(objMap[item.id])
            : (objMap[item.parentId].children = [objMap[item.id]]);
        }
      });
      // console.log(treeData)
      this.regionOptions = treeData;
    },
    async onSubmit() {
      this.visible = true;

      let region = this.form.region[2];
      const { data: seq, status: status } = await this.$http.get(
        "/farm/gbid-sequence",
        {
          params: {
            regionCode: region,
          },
        }
      );
      console.log(status);
      let sequence = `${seq.toString().padStart(3, "0")}001`;
      this.form.seq = seq;
      this.gbId =
        region +
        this.form.basic +
        this.form.industry +
        this.form.type +
        this.form.networkId +
        sequence;

      console.log("submit!", this.form);
    },
    async regionChange(value) {
      console.log(value);
      const { data: farmOpts } = await this.$http.get(
        "/farm/farms-under-region",
        {
          params: { regionCode: value[2] },
        }
      );
      this.farmOptions = [];
      farmOpts.forEach((element) => {
        this.farmOptions.push({ value: element.id, label: element.farmAlias });
      });
    },
    handleOk() {
      this.confirmLoading = true;

      this.$http.patch(`/farm/${this.form.farmId}`, {
        seq: this.form.seq,
        gbIdStart: this.gbId,
        province: this.form.region[0],
        city: this.form.region[1],
        distinct: this.form.region[2],
        industry: this.form.industry,
        encodeType: this.form.type,
        networkIdentifier: this.form.networkId,
      });
      setTimeout(() => {
        this.form.region = undefined;
        this.form.farmId = undefined;
        this.form.seq = undefined;
        this.gbId = undefined;
        this.farmOptions = [];
        this.visible = false;
        this.confirmLoading = false;
      }, 2000);
    },
    handleCancel() {
      console.log("Clicked cancel button");
      this.visible = false;
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
